let selectImg = document.querySelector('.selectImg');
let img = selectImg.querySelectorAll('li > img');
let smallBox = document.querySelector('.smallBox');
let mask = document.querySelector('.mask');
let smallBoxImg = document.querySelector('.smallBox > img');
let bigBoxImg = document.querySelector('.bigBox >img');
console.log(smallBoxImg);
let lastIndex = 0;

img.forEach((el,index)=>{
    el.addEventListener('click',()=>{
        img[lastIndex].classList.remove('active');
        smallBoxImg .src= `./images/cw${index+1}.png`; 
        bigBoxImg.src = `./images/cw${index+1}.png`;
        
        el.classList.add('active');
        lastIndex = index;

        console.log(index);
    });

});

// mask.addEventListener('mouseover',()=>{
//     // let clientY = e.clientY ;
//     // let glassHeight = mask.clientHeight / 2;
//     // let bodyHeight = smallBox.offsetTop;
//     let top = mask.offsetHeight / 2 -smallBox.offsetTop;
//     let left =mask.offsetWidth / 2 -smallBox.offsetLeft;

//     mask.style. top = top +'px';
//     mask.style. left = left +'px';
//     // console.log('123');
// });
// mask.addEventListener('mouseout',()=>{

// });
mask.addEventListener('mousemove',()=>{
    console.log('yu');
    let top = mask.offsetHeight / 2 -smallBox.offsetTop;
    let left =mask.offsetWidth / 2 -smallBox.offsetLeft;
    if(top<=0){
        top = o; 
    }
    mask.style. top = top +'px';
    mask.style. left = left +'px';
});